import React from 'react';
import { Button, Row, Col } from 'antd';
import FeaturesSection from './FeaturesSection';
import BottomSection from './BottomSection';
import './Home.css';

function App() {
  return (
    <div className="app">
      {/* 第一部分：Hero Section */}
      <section className="hero-section">
        <div className="container mx-auto px-4 md:px-20">
          <div className="pt-40 pb-40">
            <Row gutter={[16, 16]} align="middle">
              <Col xs={24} lg={12} className="text-center lg:text-left">
                <h2 className="hero-title">
                  AI提示词的<span className="text-purple">管理专家</span>
                </h2>
                <p className="hero-description">
                  高效管理您的AI提示词，支持本地存储和云端备份，让您的创意随时随地可用。
                </p>
                <Button
                  type="primary"
                  size="large"
                  className="hero-button"
                  href="/my-prompts"
                >
                  立即开始
                </Button>
              </Col>
              <Col xs={24} lg={12} className="flex justify-center">
                <div className="hero-image-container">
                  <img
                    alt="Hero illustration"
                    className="hero-image"
                    src="202503210334550.png"
                  />
                  {/* 装饰元素 */}
                  <img
                    alt="Decoration"
                    className="decoration top-right"
                    src="202503220712702.svg"
                  />
                  <img
                    alt="Decoration"
                    className="decoration bottom-right"
                    src="202503220713704.svg"
                  />
                  <img
                    alt="Decoration"
                    className="decoration middle-right"
                    src="202503220713275.svg"
                  />
                  <img
                    alt="Decoration"
                    className="decoration bottom-left"
                    src="202503220713077.svg"
                  />
                </div>
              </Col>
            </Row>
          </div>
        </div>
      </section>

      {/* 第二部分：Features Section */}
      <section className="features-section">
        <FeaturesSection />
      </section>

      {/* 第三部分：Home Bottom Section */}
      <section className="home-bottom-section">
        <BottomSection />
      </section>
    </div>
  );
}

export default App;
